创建对象(设计模式) 原型 原型链

  • cindy Liu
  • 6 Minutes
  • October 10, 2018



工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function creactPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name)
}
return o;
}


var person1 = creactPerson('cindy',19,'Engineer');

构造函数模式

1
2
3
4
5
6
7
8
9
10
functon Person(name,age,job){
this.name = name;;
this.age = age;
this.job = job;
this.sayName = funciton(){
alert(this.name)
}
}

var person1 = new Person('cindy',19,'Engineer')

要创建Person实例,必须使用new 操作符,以这种调用方式构造函数实际上会经历一下四个步骤

  1. 创建一个新对象,并将其proto属性指向构造函数的prototype属性。
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

原型模式

1
2
3
4
5
6
7
8
9
10
11
function Person(){
Person.prototype.name = "cindy";
Person.prototype.age = 29;
Person.prototype.job = 'Engineer';
Person.prototype.sayName = function (){
alert(this.name)
}
}

var person1 = new Person()
person1.sayName() //cindy

我们创建的每一个函数都有一个prototype(原型)属性。这个属性是一个指针,指向一个对象。当代码读取某个对象的某个属性时,都会执行一次搜索,首先从对象实例本身开始,接着才到指针指向的原型对象。只要在对象实例中添加一个同名属性,就会屏蔽原型对象中的属性,并且不能修改,即使将对象实例的属性值改成null.不过使用delete操作符可以完全删除实例属性。

1
delete person1.name

使用 hasOwnProperty()方法可以检测一个属性是否存在实例中,若存在则返回true

使用in操作符会在通过对象能够访问给定属性时返回true。
for-in 循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中包括存在与实例和原型中的属性。

Object.keys() 和 Object.getOwnPropertyNames()
都可以代替for-in循环

由于原型模式中的所有原型属性是被很多实例共享的,所以这是他的缺点之一。改善方法是,组合使用构造函数模式和原型模式

可以使用原型链来实现继承

https://juejin.im/post/5835853f570c35005e413b19

prototype 和 _protp_ 的区别

prototype 是函数才有的属性

_protp_是每个对象都有的属性

轻松理解JavaScript原型及原型链

https://juejin.im/post/5be42b34f265da61616e3056

  1. 原型存在的意义就是组成原型链:引用类型皆对象,每个对象都有原型,原型也是对象,也有它自己的原型,一层一层,组成原型链。
  2. 原型链存在的意义就是继承:访问对象属性时,在对象本身找不到,就在原型链上一层一层找。说白了就是一个对象可以访问其他对象中的属性。
  3. 继承存在的意义就是属性共享:好处有二:一是代码重用,字面意思;二是可扩展,不同对象可能继承相同的属性,也可以定义只属于自己的属性

instanceof运算符用于检查右边构造函数的prototype属性是否出现在左边对象的原型链中的任何位置。其实它表示的是一种原型链继承的关系。

走心大白话JavaScript教程(三)不得不说的原型与原型链

https://juejin.im/post/5901a40b44d90400690b35f8